MUI |
您所在的位置：网站首页 › mui checkbox › MUI |
MUI
|
原文地址：http://www.hcoder.net/tutorials/info_85.html 1、复选框
checkbox常用于多选的情况，比如批量删除、添加等； DOM结构 checkbox示例默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下： checkbox左侧显示示例若要禁用checkbox，只需在checkbox上增加disabled属性即可； 2、单选框radio用于单选的情况DOM结构 radio默认radio在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下 radio若要禁用radio，只需在radio上增加disabled属性即可；mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可，dom结构如下： Item 1 Item 2 Item 3列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点，如下代码打印当前选中项的innerHTML： var list = document.querySelector('.mui-table-view.mui-table-view-radio'); list.addEventListener('selected',function(e){ console.log("当前选中的为："+e.detail.el.innerText); });3、js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res); } function getRadioRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = null; for(i = 0; i < rdsObj.length; i++){ if(rdsObj[i].checked){checkVal = rdsObj[i].value;} } return checkVal; }
4、js获取复选框的值 function getVals(){ var res = getCheckBoxRes('rds'); if(res.length < 1){ mui.toast('请选择'); return; } mui.toast(res); } function getCheckBoxRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = new Array(); var k = 0; for(i = 0; i < rdsObj.length; i++){ if(rdsObj[i].checked){ checkVal[k] = rdsObj[i].value; k++; } } return checkVal; }
|
【本文地址】